﻿@model DHQGHN.PM2.ViewModels.MappingArea_EnumViewModel

<script type="text/javascript">
    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("AreaMapped")',
            type: 'POST',
            datatype: 'json',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: { enumID: $('#ENUMERATOR_ID').val()},
            success: function (lstItems) {
                $.each(lstItems, function (i, lstItem) {
                    $('#chk' + lstItem.Value).prop('checked', true);
                    $('#td' + lstItem.Value).css("color", "white");
                    $('#td' + lstItem.Value).css("background-color", "#19A3A3");
                });
            },
            error: function (ex) {
                alert('Lỗi kỹ thuật.' + ex);
            }
        })

        if ($('#' + $('.notmapped').attr('id')).is(':checked') == true) {
            $('#td' + $(this).val()).css("color", "white");
            $('#td' + $(this).val()).css("background-color", "#19A3A3");
        }
        else {
            $('#td' + $(this).val()).css("color", "black");
            $('#td' + $(this).val()).css("background-color", "white");
        }

        if ($('#' + $('.mapped').attr('id')).is(':checked') == true) {
            $('#td' + $(this).val()).css("color", "white");
            $('#td' + $(this).val()).css("background-color", "#19A3A3");
        }
        else {
            $('#td' + $(this).val()).css("color", "black");
            $('#td' + $(this).val()).css("background-color", "white");
        }

    });

    $('.mapped').click(function () {

        var getchkid = $(this).attr('id');
        var isChecked = $('#' + getchkid).is(':checked');

        if ($('#' + getchkid).is(':checked') == true) {
            $('#td' + $(this).val()).css("color", "white");
            $('#td' + $(this).val()).css("background-color", "#19A3A3");
        }
        else {
            $('#td' + $(this).val()).css("color", "black");
            $('#td' + $(this).val()).css("background-color", "white");
        }
    });
</script>

@using (Html.BeginForm("IndexArea_Enum", "MappingDiaBan", FormMethod.Post, new { id="MappingArea_EnumForm"}))
{
    @Html.AntiForgeryToken()
    @*<div class="form-horizontal" align="center" style="height: 60%">*@

    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.GROUP)
    @Html.HiddenFor(model => model.ENUMERATOR_ID)
    @Html.HiddenFor(model => model.AREA_ID)
    @Html.HiddenFor(model => model.areaSelected)
    @*<div style="padding-left: 10%;">*@
    <div class="row">
        <div class="col-md-12">
            <div class="btn default" style="width:100%;">
                <h4 style="margin: 0px !important">Danh sách địa bàn đã gán</h4>
            </div>
            @if (Model.area != null) { 
            <div style="height: 300px; overflow-y: auto; border: 1px solid #e5e5e5;">
                <table class="table table-striped table-bordered table-hover dataTable no-footer" style="margin-top: 0px !important;">
                    @foreach (var area2 in @Model.area)
                    {
                        var checkBoxSelected = "chk" + area2.Value;
                        var text = "td" + area2.Value;

                        <tr>
                            <td width="20px" align="center">
                                <input type="checkbox" id="@checkBoxSelected" name="mapped" class="mapped" value="@area2.Value" />
                            </td>
                            <td id="@text">
                                @area2.Text
                            </td>
                        </tr>

                    }
                </table>
            </div>
            }
            else
            {
                <div align="center"><h4>Không tìm thấy kết quả nào phù hợp</h4></div>
            }
        </div>
    </div>
}




